<template>
  <div class="home">
 <transition name="van-fade">
  <div v-if="$route.path==='/home'">
     <van-search
      shape="round"
      placeholder="请输入搜索关键词"
      disabled
      @click="searchClick"
      />
      <!-- 首页banner轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1989fa">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img :src="item.image_url" alt="" width="100%">
      </van-swipe-item>
    </van-swipe>

    
  </div>
 </transition>
 

  <!-- 黑色遮罩层 -->
  <transition name="van-fade">
    <div class="popup-shadow" v-show="isShowShadow"></div>
  </transition>
  <!-- 展示搜索弹出框 -->
  <transition name="van-slide-right">
      <router-view></router-view>
  </transition>


 
  </div>
</template>

<script>
// @ is an alias to /src
//import HelloWorld from '@/components/HelloWorld.vue'
import {mapState,mapMutations} from 'vuex'
import {GetHomeData} from '@/request/api.js'


export default {
  name: 'Home',
  data(){
    return{
     
      banner:[]
    }
  },
  computed:{
    ...mapState({
      isShowShadow:state=>state.showshadow.isShowShadow
    })
  },
  created(){
    GetHomeData()
    .then(res=>{
      console.log(res.data.banner)
      let {banner} = res.data
      this.banner = banner
    }).catch(err=>{
      console.log(err)
    })
  },
  methods:{
    ...mapMutations({
      chanisShowShadow:'showshadow/chanisShowShadow'
    }),
    searchClick(){
      this.$router.push('/home/searchpopup')
      this.chanisShowShadow(true)
    }
  },
  watch:{
    $route(to,from){
      if(to.path==='/home'){
         this.chanisShowShadow(false)
      }
    }
  },
  components: {
   
  }
}
</script>

<style lang = "less" scoped>
/* .slide-enter,.slide-leave-to{
  right: -100%;
}

.slide-enter-active, .slide-leave-active{
  transition: all .5s;
}

.slide-enter-to, .slide-leave{
  right: 0;
} */
.home{
  padding-bottom: .5rem;
}
.popup-shadow{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0,0,0,0.7);
  z-index: 1;
}
</style>
